<template>
  <div class="login-container">
    <h2 class="page-title">{{ $localePath === "/" ? "用户登录" : "User Login" }}</h2>
    <form @submit.prevent="handleLogin" class="login-form">
      <!-- 用户名输入 -->
      <div class="form-item">
        <label>{{ $localePath === "/" ? "用户名：" : "Username：" }}</label>
        <input
          type="text"
          v-model="form.username"
          required
          :placeholder="$localePath === '/' ? '请输入注册时的用户名' : 'Enter your username'"
          class="form-input"
        />
      </div>
      <!-- 密码输入 -->
      <div class="form-item">
        <label>{{ $localePath === "/" ? "密码：" : "Password：" }}</label>
        <input
          type="password"
          v-model="form.password"
          required
          :placeholder="$localePath === '/' ? '请输入密码' : 'Enter your password'"
          class="form-input"
        />
      </div>
      <!-- 登录按钮 -->
      <button type="submit" class="login-btn" :disabled="loading">
        <i class="fa fa-spinner fa-spin" v-if="loading"></i>
        <span v-if="loading">{{ $localePath === "/" ? "登录中..." : "Logging in..." }}</span>
        <span v-else>{{ $localePath === "/" ? "登录" : "Login" }}</span>
      </button>
      <!-- 跳转注册页 -->
      <p class="register-link">
        {{ $localePath === "/" ? "没有账号？" : "No account？" }}
        <a :href="$localePath + 'register/'">{{ $localePath === "/" ? "去注册" : "Go to Register" }}</a>
      </p>
    </form>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";

// 获取全局实例
const { proxy } = getCurrentInstance();
const router = useRouter();

// 表单数据
const form = ref({
  username: "",
  password: ""
});

// 加载状态
const loading = ref(false);

// 登录逻辑
const handleLogin = async () => {
  loading.value = true;
  try {
    // 调用后端登录接口
    const res = await proxy.$axios.post("/auth/login", form.value);
    if (res.code === 0) {
      // 登录成功：存储 Token 和用户名到 localStorage
      localStorage.setItem("blog_token", res.data.token);
      localStorage.setItem("blog_username", res.data.username);
      proxy.$toast.success(res.msg || ($localePath === "/" ? "登录成功，跳转管理中心..." : "Login success, redirecting to admin..."));
      // 跳转管理中心（适配多语言）
      setTimeout(() => {
        router.push($localePath + "admin/");
        window.location.reload();  // 刷新页面使导航栏生效
      }, 1500);
    } else {
      // 登录失败（如用户名密码错误）
      proxy.$toast.error(res.msg || ($localePath === "/" ? "用户名或密码错误" : "Invalid username or password"));
    }
  } catch (error) {
    // 网络错误由拦截器处理
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* 与注册组件样式复用，仅调整容器名称 */
.login-container {
  max-width: 450px;
  margin: 40px auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
}

.login-form {
  margin-top: 20px;
}

.form-item {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.form-input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #42b983;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.login-btn:disabled {
  background: #91e0b8;
  cursor: not-allowed;
}

.register-link {
  margin-top: 16px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.register-link a {
  color: #42b983;
  text-decoration: none;
}

.register-link a:hover {
  text-decoration: underline;
}
</style>